<template>
    <div>
        <el-card :bodyStyle="{padding: '10px'}">
            <el-row>
                <el-col :span="20">
                    <div>
                        <span v-if="namespace">命名空间: </span>
                        <el-select v-if="namespace" @change="nsChange" show-search
                            style="width:140px;margin-right:20px;" size="small" v-model="namespaceValue"
                            placeholder="请选择">
                            <el-option v-for="(item, index) in namespaceList" :key="index" :value="item.metadata.name">
                                {{ item.metadata.name }}
                            </el-option>
                        </el-select>

                        <!-- <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="(item, index) in namespaceList" :key="index" :value="item.metadata.name">
                                {{ item.metadata.name }}
                            </el-option>
                        </el-select> -->

                        <span v-if="en">环境: </span>
                        <el-select v-if="en" @change="enChange" show-search style="width:140px;margin-right:20px;"
                            size="small" v-model:value="enValue" placeholder="请选择">
                            <el-option value="">全部</el-option>
                            <el-option v-for="(item, index) in enList" :key="index" :value="item">
                                {{ item }}
                            </el-option>
                        </el-select>
                        <el-input allow-clear @change="searchChange" style="width:200px;margin-right:10px;"
                            v-model="searchValue" size="small" clearable :placeholder="searchDescribe">
                        </el-input>
                        <!-- <el-button size="small" type="primary" ghost @click="$emit('dataList')">
                            <template #icon><SearchOutlined /></template>
                            搜索
                        </el-button> -->
                        <el-button size="small" type="primary"  @click="$emit('dataList')">
                            <el-icon style="vertical-align: middle;">
                                <search />
                            </el-icon>
                            搜索
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-button v-if="add" :icon="Upload" style="margin-right:10px;" size="small" type="primary" ghost @click="$emit('addFunc')">
                            新增
                        </el-button>
                        <!-- <el-button class="add-button" size="small" type="primary" icon="el-icon-search" ghost @click="$emit('addFunc')">
                            <span class="button-text">新增</span>
                        </el-button> -->
                        <!-- 新增|刷新 -->
                        <el-button size="small" :icon="Search" @click="$emit('dataList')">
                            刷新
                        </el-button>

                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
    import { onMounted, reactive, ref } from 'vue';
    import {
        setEn,
        getEn,
        setNamespace,
        getNamespace,
    } from '~/composables/mainHead';
    import { getCluster } from '~/composables/clustersList'
    import { getNamespaces } from '~/api/namespace'
    import { toast } from '~/composables/util'
    import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

    const loading = ref(false)
    const emit = defineEmits(["envChange", "searchChange", "namespaceChange", "namespaceList", "dataList", "addFunc"])

    const prop = defineProps({
        en: {
            type: Boolean, default: false
        },
        namespace: { 
            type: Boolean, default: false 
        },
        searchDescribe: { 
            type: String, default: '' 
        },
        add: { 
            type: Boolean, default: false
        },
    })

    const enValue = ref('')
    const searchValue = ref('')
    const namespaceValue = ref('default')
    //命名空间列表
    const namespaceList = ref([])
    const namespaceTotal = ref(0)
    const namespaceListData = reactive({
        params: {
            cluster: ''
        }
    })
    const enChange = (val) => {
        enValue.value = val
        setEn(val)
        emit('envChange', val)
        emit('dataList')
    }
    const nsChange = (val) => {
        namespaceValue.value = val
        setNamespace(val)
        emit('namespaceChange', val)
        emit('dataList')
    }
    const searchChange = () => {
        console.log("searchChange===", searchValue.value)
        emit('searchChange', searchValue.value)
    }
    //获取命名空间列表
    const getNamespaceList = () => {
        loading.value = true
        namespaceListData.params.cluster = getCluster()
        const namespaceParams = {params: namespaceListData.params}
        getNamespaces(namespaceParams)
        .then(res => {
            namespaceList.value = res.items
            namespaceTotal.value = res.total
            emit("namespaceList", namespaceList.value)
        })
        .catch(res => {
            console.error('Error in getNamespaces:', res);
            // toast(res.msg, "error")
            toast(res || 'An error occurred', 'error');
        })
        .finally(()=>{
        loading.value = false
    })
    }

    onMounted(() => {
        if (prop.en) {
            if (getEn() != null ) {
                enChange(getEn())
            } else {
                enChange(enValue.value)
            }
        }
        if (getNamespace()) {
            nsChange(getNamespace())
        } else {
            nsChange(namespaceValue.value)
        }
        getNamespaceList()
    })

</script>

<style scoped>
    .ant-btn {
        border-radius: 1px;
    }
    .add-button {
        border-radius: 1px;
        margin-left: auto; /* 将按钮推到父容器的最右边 */
        position: absolute;right:10px;top:5px;

        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 10px;
        top: 5px;
    }
    .button-text {
        margin-left: 4px; /* 调整文本与图标的间距 */
    }
</style>